<template>
  <div class="order-check-page">
    <top class="top" :key="id+'-top'"></top>
    <middle class="middle" :key="id+'-middle'" @handleCancel="handleCancel"></middle>
  </div>
</template>

<script>
import Top from './layout/check/Top';
import Middle from './layout/check/Middle';

export default {
  name: "OrderCheckPage",
  props: {

  },
  data() {
    return {
      id: this.$route.params.id
    };
  },
  computed: {

  },
  mounted() {

  },
  watch: {
    /**
     * id变化刷新页面
     */
    '$route' (to, from) {
      if(to.params.id !== this.id && to.name == 'OrderCheck'){
        this.load();
      }
    }
  },
  methods: {
    /**
     * 刷新页面id
     */
    load() {
      this.id = this.$route.params.id;
    },
    /**
     * 放弃表单修改，回到OrderIndex页面，并将页面组件key设置为cancel
     */
    handleCancel() {
      this.$message.info('放弃修改订单');
      this.$router.go(-1);
      this.id = `${this.id}-cancel`;
    }
  },
  components: {
    Top,
    Middle
  },
};
</script>

<style scoped lang="scss">
.order-check-page {
  >.top {
    margin-top: 2rem;
    margin-bottom: 5px;
  }
  >.middle {
    display: flex;
    justify-content: center;
  }
}
</style>
